<template>
  <div>
    <!-- <div class="list-btn">
      时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px" ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px"></DatePicker>
    </div> -->
    <!-- <div class="list-btn">
      订单状态:
      <Select clearable style="width:200px" v-model="params.status" placeholder="请选择" @on-change="get(params.status)">
        <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
    </div> -->
    <!-- <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div> -->
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    methods:{
      get(s){
        console.log(s)
      }
    },
    data () {
      return {
         tag: {
          'title': '订单到期统计',
          'path': '/work/expire/list'
        },
        listTitle: [
          {
            title: '到期日期',
            key: 'repayDate',
            align:'center',
            minWidth:80,
            render: (h,params) =>{
              return h('div',this.getLocalDate(params.row.repayDate))
            }
          },
           {
            title: '下单日期',
            key: 'borrowDate',
            align:'center',
            minWidth:80,
             render: (h,params) =>{
              return h('div',this.getLocalDate(params.row.borrowDate))
            }
          },

          {
            title: '到期订单数',
            key:'expireOrderCount',
            align:'center',
            minWidth:50
          },
          {
            title: '已还订单数',
            key:'repaidOrderCount',
            align:'center',
            minWidth:50,
          },
          {
            title: '结清率',
            key: 'settleRate',
            minWidth:60,
            align:'center',
            render: (h,params) =>{
              return h('div',(params.row.settleRate*100).toFixed(2)+'%')
            }
          },
           {
            title: '到期应还总额(元)',
            key: 'expireNeedAmount',
            align:'center',
            minWidth:80,
             render: (h,params) =>{
              return h('div',this.toYuan(params.row.expireNeedAmount))
            }

          },

          {
            title: '到期本金(元)',
            key: 'expirePrincipal',
            align:'center',
             minWidth:65,
             render: (h,params) =>{
              return h('div',this.toYuan(params.row.expirePrincipal))
            }
          },
          {
            title: '已还金额(元)',
            key: 'repaidAmount',
             minWidth:65,
            align:'center',
             render: (h,params) =>{
              return h('div',this.toYuan(params.row.repaidAmount))
            }
          },

           {
            title: '剩余金额(元)',
            key: 'restAmount',
            align:'center',
             minWidth:65,
              render: (h,params) =>{
              return h('div',this.toYuan(params.row.restAmount))
            }
          },
           {
            title: '新户到期订单数',
            key: 'newUserExpireOrderCount',
             className:'color2D8CF0',
            align:'center',
             minWidth:65,

          },
           {
            title: '新户已还订单数',
            key: 'newUserRepaidOrderCount',
             className:'color2D8CF0',
            align:'center',
             minWidth:65,

          },
           {
            title: '新户结清率',
            key: 'newUserSettleRate',
             className:'color2D8CF0',
            align:'center',
             minWidth:60,
              render: (h,params) =>{
              return h('div',(params.row.newUserSettleRate*100).toFixed(2)+'%')
            }

          },
           {
            title: '新户到期应还总额(元)',
            key: 'newUserExpireNeedAmount',
             className:'color2D8CF0',
            align:'center',
             minWidth:80,
              render: (h,params) =>{
              return h('div',this.toYuan(params.row.newUserExpireNeedAmount))
            }

          },
          {
            title: '新户到期本金(元)',
            key: 'newUserExpirePrincipal',
            className:'color2D8CF0',
            align:'center',
             minWidth:70,
              render: (h,params) =>{
              return h('div',this.toYuan(params.row.newUserExpirePrincipal))
            }


          },
           {
            title: '新户已还金额(元)',
            key: 'newUserRepaidAmount',
             className:'color2D8CF0',
            align:'center',
             minWidth:70,
              render: (h,params) =>{
              return h('div',this.toYuan(params.row.newUserRepaidAmount))
            }

          },
           {
            title: '新户剩余金额(元)',
            key: 'newUserRestAmount',
             className:'color2D8CF0',
            align:'center',
             minWidth:70,
              render: (h,params) =>{
              return h('div',this.toYuan(params.row.newUserRestAmount))
            }
          },
           {
            title: '老户到期订单数',
            key: 'oldUserExpireOrderCount',
             className:'colorRed',
            align:'center',
             minWidth:70,

          },
          {
            title: '老户已还订单数',
            key: 'oldUserRepaidOrderCount',
            className:'colorRed',
            align:'center',
            minWidth:65,

          },
           {
            title: '老户结清率',
            key: 'oldUserSettleRate',
             className:'colorRed',
            align:'center',
             minWidth:55,
               render: (h,params) =>{
              return h('div',(params.row.oldUserSettleRate*100).toFixed(2)+'%')
            }

          },
          {
            title: '老户到期应还总额(元)',
            key: 'oldUserExpireNeedAmount',
            className:'colorRed',
            align:'center',
             minWidth:85,
              render: (h,params) =>{
              return h('div',this.toYuan(params.row.oldUserExpireNeedAmount))
            }

          },
          {
            title: '老户到期本金(元)',
            key: 'oldUserExpirePrincipal',
            className:'colorRed',
            align:'center',
             minWidth:70,
            render: (h,params) =>{
              return h('div',this.toYuan(params.row.oldUserExpirePrincipal))
            }

          },
          {
            title: '老户已还金额(元)',
            key: 'oldUserRepaidAmount',
            className:'colorRed',
            align:'center',
             minWidth:70,
              render: (h,params) =>{
              return h('div',this.toYuan(params.row.oldUserRepaidAmount))
            }

          },
          {
            title: '老户剩余金额(元)',
            key: 'oldUserRestAmount',
            className:'colorRed',
            align:'center',
             minWidth:70,
              render: (h,params) =>{
              return h('div',this.toYuan(params.row.oldUserRestAmount))
            }

          },
        ],
        url: '/statistics/order/expire',
        nameListUrl: '',
        params: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10
        },

      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
/deep/ .ivu-table-cell {
    padding-left: 5px;
    padding-right: 5px;
}

  /deep/ .color2D8CF0{
    color:#2D8CF0;
  }
  /deep/ .colorRed{
    color:mediumvioletred;
  }
</style>
